<template>
  <div>
    <div style="font-size: 12px;" class="afternoon-tea-order" v-for="item in dataList" :key="item.id">
      <div style="font-weight: bold;margin-left: 10px;font-size: 14px;">{{item.merchantName || '熊猫不走蛋糕'}}</div>
      <div style="font-weight: bold;margin: 18px auto;text-align: center;font-size: 14px;">-------- {{getItemNum(item)}}{{channelMap[item.channel] || '美团外卖'}} --------</div>

      <div>订单编号：{{item.xmbzNo}}</div>
      <div>下单时间：{{item.orderTime && item.orderTime.slice(0,10)}}</div>
      <div>送达时间：{{item.deliveryTime && item.deliveryTime.slice(0,16)}}</div>

      <div style="height: 1px;width:100%;border-bottom: 2px dashed;margin: 10px auto;"></div>

      <div>姓    名：{{item.bookerName}}</div>
      <div>顾客号码：{{item.bookerPhone}}</div>
      <div>隐私号码：{{item.receiverPhone}}</div>
      <div>配送地址：为保护用户隐私，地址隐藏</div>
      <div>备注：{{item.remark}}</div>

      <div style="height: 1px;width:100%;border-bottom: 2px dashed;margin: 10px auto;"></div>
    
      <div style="display: flex">
        <div style="flex: 3"><span style="font-weight: bold;">商品名称</span></div>
        <div style="flex: 1"><span style="font-weight: bold;">数量</span></div>
        <div style="flex: 1;text-align: right;"><span style="font-weight: bold;">金额</span></div>
      </div>
      <div v-for="d in item.orderDetail" :key="d.id" style="margin-top: 16px;display: flex">
        <div style="flex: 3">
          <div style="font-size: 14px; font-weight: bold;">{{d.goodsName}}</div>
          <div style="white-space: nowrap;">生产日期：{{d.productionTime && d.productionTime.slice(0,10)}}</div>
        </div>
        <div style="flex: 1"><span style="">x{{d.quantity}}</span></div>
        <div style="flex: 1;text-align: right;"><span style="font-weight: bold;">{{d.totalPrice ? (d.totalPrice * d.quantity / 100) : ''}}</span></div>
      </div>
      <div style="display: flex;margin-top: 16px;">
        <div style="flex: 3"><span style="font-weight: bold;">合计</span></div>
        <div style="flex: 1"><span style="">x{{item.num}}</span></div>
        <div style="flex: 1;text-align: right;"><span style="font-weight: bold;">{{item.price / 100}}</span></div>
      </div>

      <div style="height: 1px;width:100%;border-bottom: 2px dashed;margin: 10px auto;"></div>

      <div>
        <div style="font-weight: bold;font-size: 14px;">其他费用</div>
        <div style="display: flex;justify-content: space-between;"><span>打包费:</span><span>{{item.boxTotalPrice || '无'}}</span></div>
        <div style="display: flex;justify-content: space-between;"><span>配送费:</span><span>{{item.postPrice || '无'}}</span></div>
        <div style="display: flex;justify-content: space-between;"><span>优惠合计:</span><span>{{item.preferential ? `-${item.preferential/100}` : '无'}}</span></div>
      </div>

      <div style="height: 1px;width:100%;border-bottom: 2px dashed;margin: 10px auto;"></div>

      <div style="font-size: 10px">
        <div style="display: flex;justify-content: space-between;"><span>订单原价(含配送费和打包费):</span><span style="flex-wrap: nowrap;">{{item.originalPrice / 100}}元</span></div>
        <div style="display: flex;justify-content: space-between;"><span>实付金额(用户在线支付):</span><span style="flex-wrap: nowrap;">{{item.totalPrice / 100}}元</span></div>
      </div>

      <div style="font-weight: bold;text-align: center;margin-top: 10px;margin-bottom: 18px;font-size: 12px;">###################</div>
      <div style="height: 1px;width:100%;border-bottom: 2px dashed;margin: 10px auto;"></div>
    </div>
  </div>
</template>

<script>
import getLodop from '@/lodop/LodopFuncs';
const channelMap = {
  2: '美团外卖',
  3: '饿了么'
}
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      channelMap
    }
  },
  created() {
  },
  methods: {
    getItemNum(order) {
      return '#' + Number(order.xmbzNo.slice(-4))
    },
    async print(isOpenPrintPreview, printer) {
      const LODOP = getLodop()
      if (LODOP) {
        const htmlStr = this.$el.outerHTML
        console.log(this.$el)
        LODOP.PRINT_INIT('') //初始化
        LODOP.SET_PRINT_PAGESIZE(3, '48mm', '', '')
        LODOP.ADD_PRINT_HTM('0', '0', '100%', '100%', htmlStr) //设置打印内容
        LODOP.SET_PRINT_MODE('CUSTOM_TASK_NAME', '生产-下午茶小票')// 打印任务名
        LODOP.SET_PRINTER_INDEX(printer || 'XP-58');
        const lodopPromise = () => {
          return new Promise(resolve => {
            CLODOP.On_Return = (value) => {
              resolve(value)
            }
          })
        }

        if (isOpenPrintPreview) {
          LODOP.PREVIEW();
        } else {
          LODOP.PRINT()
        }
        await lodopPromise()
      }
    }
  },
  mounted() {
  },
};
</script>

<style lang='scss'>
</style>
